<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  <title>点点科技</title>
  <script src="js/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.5.0/fetch.min.js"></script>
  <style>
    body {
      margin: 0 auto;
      position: relative;
    }

    img {
      width: 100%;
      height: auto;
    }

    .bottomview {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      background-color: #ffffff;
    }

    .btn {
      width: 100%;
      height: 40px;
      display: block;
      margin: 10px;
      background-color: #0087ff;
      border-width: 0;
      border-radius: 5px;
      font-size: 13px !important;
      color: #ffffff;
    }

    /* 模态框初始状态 */
    .modalbox {
      /* 通过 position 让遮罩层撑满整个屏幕 */
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /* 遮罩层背景色为黑色 */
      background: rgba(0, 0, 0, 0.5);
      /* 给 z-index 一个过大的值，确保遮罩层”真的遮盖住了“模态框背后的元素 */
      z-index: 99999;
      /* 一些过渡效果 */
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      /* pointer-events: none;
      pointer-events: auto; */
      /* visibility: hidden; */
      display: none;
      justify-content: center;
      align-items: center;
    }

    /* 模态框内容，你也可以自定义 */
    .modalbox-dialog {
      width: 650px;
      height: auto;
      border-radius: 10px;
      background: #ffffff;
      margin-left: 25px;
      margin-right: 25px;
      text-align: center;
      padding: 25px 16px;
    }

    p {
      display: inline;
      font-size: 15px;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }

    .from {
      margin-top: 10px;
    }

    .input {
      font-size: 15px;
      height: 50px;
      width: 100%;
      outline: none;
      border: none;
      border-bottom: 1px solid #EEEEEE
    }

    .input::-ms-input-placeholder {
      color: #cccccc;
    }

    .input::-webkit-input-placeholder {
      color: #cccccc;
    }

    .code-button {
      position: absolute;
      right: 10px;
      color: #0474FE;
      font-size: 15px;
      background-color: #ffffff;
      border: none;
      outline: none;
      display: inline-block;
    }

    .modal-btn {
      width: 40%;
      height: 44px;
      border-radius: 22px;
      font-size: 18px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border: none;
      outline: none;
    }
  </style>
</head>

<body>
  <div>
    <img src="picture/8.png" />
  </div>
  <div>
    <img src="picture/9.png" />
  </div>
  <div style="margin-bottom: 60px;">
    <img src="picture/10.png" />
  </div>
  <div class="bottomview">
    <button class="btn">
      点击注册
    </button>
  </div>
  <div id="my-modal-box" class="modalbox">
    <div class="modalbox-dialog">
      <p class="title">注册点点科技</p>
      <input id='phone' class="input" type='number' placeholder="请输入手机号"
        oninput="if(value.length>11)value=value.slice(0,11)" />
      <div style='position: relative;align-items: center;display: flex;'>
        <input id='code' class="input" type='number' placeholder="请输入验证码" />
        <div class="code-button" class="input">获取验证码</div>
      </div>
      <div style='margin-top: 15px;'>
        <div class="modal-btn" id='cancel' style='color: #AAAAAA;border: 1px solid #AAAAAA; background: #FFFFFF;'>取消
        </div>
        <div class="modal-btn" id='submit' style='color: #FFFFFF;border: none; background: #0474FE; '>立即注册</div>
      </div>
      <div style="margin-top: 20px;">
        <p>
          已安装点点科技客户端?
        <p style='color:#0474FE;' onclick="openApp()">
          打开app
        </p>
        </p>
      </div>

    </div>
  </div>

  <script>

    //判断是否微信登陆
    function isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    }

    $(function () {
      if (isWeiXin()) {

      }
    });

    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }

    function openApp() {
      alert('请去桌面打开App')
    }

    $(".btn").click(function () {
      $('.modalbox').css('display', 'flex');
    });

    $("#cancel").click(function () {
      $('.modalbox').css('display', 'none');
    })

    $('#submit').click(function (event) {
      event.preventDefault();
      var phone = $("#phone").val();
      var code = $('#code').val();
      var parentId = getQueryVariable('parentId');
      if (phone.length != 11) {
        alert('请输入正确的手机号')
        return
      }
      if (!code) {
        alert('请输入验证码')
        return
      }
      var json = {
        phone: phone,
        code: code,
        parentId: parentId
      }

      fetch("https://app.ddys123.com/app/login/homeLogin", {
        method: "POST",
        mode: "cors",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Connection: "close"
        },
        body: JSON.stringify(json)
      })
        .then(response => {
          if (response.ok) {
            return response.json();
          }
          return response;
        })
        .then(result => {
          alert(result.message)
          $('.modalbox').css('display', 'none');
          if (result.code == 200) {
            window.location.href = 'http://dl.ddys123.com:8080/';
          }
        })
        .catch(error => {
          console.log(error);
        });

      // $.ajax({
      //   url: "https://app.ddys123.com/app/login/homeLogin",
      //   async: true,
      //   type: 'post',
      //   dataType: "json",
      //   contentType: 'application/json',
      //   data: JSON.stringify(json),
      //   success: function (result) {
      //     alert(result.message)
      //     $('.modalbox').css('display', 'none');
      //     if (result.code == 200) {
      //       window.location.href = 'http://dl.ddys123.com:8080/';
      //     }
      //   },
      //   error: function (err) {
      //     console.log(err)
      //   }
      // });


    })

    var wait = 60;
    function time(o) {
      if (wait == 0) {
        o.style["pointer-events"] = "auto";
        o.innerText = "获取验证码";
        wait = 50;
      } else {
        o.style["pointer-events"] = "none";
        o.innerText = "重新发送(" + wait + ")";
        wait--;
        setTimeout(function () {
          time(o)
        },
          1000)
      }
    }

    $(".code-button").click(function (event) {
      event.preventDefault();
      var phone = $("#phone").val();
      if (phone.length == 11) {
        time(this);
        var json = {
          phone: phone
        }

        fetch("https://app.ddys123.com/app/login/sendCode", {
        method: "POST",
        mode: "cors",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Connection: "close"
        },
        body: JSON.stringify(json)
      })
        .then(response => {
          if (response.ok) {
            return response.json();
          }
          return response;
        })
        .then(result => {
          alert(result.message)
        })
        .catch(error => {
          console.log(error);
        });

        // $.ajax({
        //   url: "https://app.ddys123.com/app/login/sendCode",
        //   async: true,
        //   type: 'post',
        //   dataType: "json",
        //   contentType: 'application/json',
        //   data: JSON.stringify(json),
        //   success: function (data) {
        //     alert(data.message)
        //   },
        //   error: function (err) {
        //     console.log(err)
        //   }
        // });
      } else {
        alert('请输入正确的手机号')
      }
    })



  </script>
</body>

</html>